<template>
	<view class="signVip">
		<view class="paramer-box">
			<view class="title-association">
				{{teamInfo.name}} 
			</view>
			<view class="">
				<view class="input-item">
					<text class="tit">真实姓名：</text>
					<input type="text" v-model="form.name" placeholder="请输入真实姓名" maxlength="11"
						data-key="mobileNo"/>
				</view>
				<view class="input-item">
					<text class="tit">身份证号：</text>
					<input type="text" v-model="form.cardId" placeholder="请输入身份证号" maxlength="18"
						data-key="mobileNo"/>
				</view>
				<view class="input-item">
					<text class="tit">手机号码：</text>
					<input type="number" v-model="form.phone" placeholder="请输入手机号码" maxlength="11"
						data-key="mobileNo" @input="inputChange" />
				</view>
				<view class="input-item">
					<view style="display: flex;align-items: center;">
						<view style="flex: 1;">
							<input type="number" v-model="form.code" placeholder="请输入验证码" placeholder-class="input-empty"
								maxlength="20" data-key="mobile" @input="inputChange" />
						</view>
						<view class="mobileno-input-right">
							<a class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</a>
							<a class="sendCodeBtn" v-if="!verification">{{ timer }} 秒后重新获取</a>
						</view>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @click="addTeamById" >申 请 加 入</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	export default {
		data() {
			return {
				// 协会数据
				teamInfo: {},
				author: false, // 微信授权
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				// 注册参数
				form: {
					memberId: '',
					teamId: '',
					name: '',
					phone: '',
					cardId: '',
					codeKey: '',
					code: '',
				},			
			}
		},
		onLoad(option) {
			this.form.teamId = option.scene
			this.$api.request.getTeamInfo({
				teamId: option.scene
			}, res => {
				if(res.code == 200){
					this.teamInfo = res.data
				}
			})
		},
		computed: {
			...mapState(['applicationConfig','session_key','openid','token'])
		},
		methods: {
			// 点击加入校友会
			addTeamById(){
				const that = this
				// 判断用户是否已经注册
				if(this.form.name == null || this.form.name == ''){
					this.$api.msg("请填写真实姓名")
				}else if(this.form.phone == null || this.form.phone == ''){
					this.$api.msg("请填写手机号")
				}else if(this.form.code == null || this.form.code == ''){
					this.$api.msg("请获取验证码")
				}else {
					this.$api.request.getUserIsSign({
						openId: uni.getStorageSync('openId')
					}, res => {
						console.log(res.data.length);
						if(res.code == 200 && res.data.length > 0){
							uni.setStorageSync('userInfo', res.data[0])
							uni.setStorageSync('authStatus', true)
							that.form.memberId = res.data[0].id
							this.$api.request.addUserByTeam(that.form, rs => {
								if(rs.code == 200){
									this.$api.msg("申请成功")
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/sys/home/index'
										})
									},2000)
								}else{
									this.$api.msg(rs.message)
								}
							})
						}else if(res.code == 200 && res.data == 0){
							uni.getUserProfile({
								desc: "获取你的昵称、头像、地区及性别",
								success: (res) => {
									// console.log(res);
									this.$api.request.addOpenid({
										encryptedData: res.encryptedData,
										iv: res.iv,
										sessionKey: this.session_key,
										wechatId: uni.getStorageSync('openId'),
										sourceType:"APP"
									},res=>{
										if(res.code==200){
											this.$api.request.getWxUser({
												wechatId: this.openid
											}, res => {
												if (res.code == 200&&res.data!=404) {													
													this.$store.commit("setToken", uni.getStorageSync(
														'userToken'))
													this.$store.commit("setToken", res.data.tokenValue)
													that.$api.request.userInfo({
														type: 'application/x-www-form-urlencoded',
													}, res => {
														if(res.code == 200){
															uni.setStorageSync('userInfo', res.data)
															uni.setStorageSync('authStatus', true)
															that.form.memberId = res.data.id
															this.$api.request.addUserByTeam(that.form, rs => {
																if(rs.code == 200){
																	this.$api.msg("申请成功")
																	setTimeout(() => {
																		uni.switchTab({
																			url: '/pages/sys/home/index'
																		})
																	},2000)
																}else{
																	this.$api.msg(rs.message)
																}
															})
														}
													})
												}else{
													setTimeout(function() {
														uni.showToast({
															title: res.message,
															icon: 'none'
														})
													},100)
												}
											})
										}else if(res.code == 205){
											setTimeout(function() {
												uni.showToast({
													title: res.message,
													icon: 'none'
												})
												setTimeout(() => {
													uni.hideLoading()
												})
											},100)
										}
									})
									
								}
							})
						}
					})
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			sendCode() {
				if (!this.$api.util.validateMobileNo(this.form.phone)) {
					this.$api.msg('手机号码格式错误');
					return
				}else{
					this.$api.request.getPhoneCode({
						phone: this.form.phone,
						temp: 'register'
					}, res => {
						// console.log(res);
						this.$u.toast(res.message);
						if (res.code == 200) {
							this.$api.msg('验证码已发送');
							this.form.codeKey = res.data.codeKey
							uni.setStorage({
								key: 'codeKey',
								data: res.data.codeKey
							})
							this.timer = 60
							this.verification = false
							this.countDown() // 执行验证码计时
						}
					})
									
									
				}
				// });
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer-- // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					})
					if (this.timer <= 0) {
						this.verification = true // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer)
					}
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.signVip {
		width: 100vw;
	}
	
	.title-association{ 
		text-align: center;
		font-size: 42rpx;
		font-weight: 500;
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}
	
	
	.input-item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 65upx;
		border-radius: 4px;
		margin-bottom: 60upx;
	
		&:last-child {
			margin-bottom: 0;
		}
	
		.tit {
			text-align: right;
			width: 200rpx;
			height: 50upx;
			line-height: 56upx;
			padding-right: 20rpx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
	
		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
		
		.sendCodeBtn{
			font-size: 30rpx;
			color: #009B65;
		}
	}
	
	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		position: fixed;
		bottom: 60rpx;
		left: calc((100vw - 630upx) / 2);
		background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
		color: #fff;
		font-size: $font-lg;
	
		&:after {
			border-radius: 100px;
		}
	}

</style>
